<template>
  <!-- 这是 Bookmark 组件的模板部分，使用 Element UI 的栅格系统布局 -->
  <div>
    <el-col :span="12" class="col_box">
      <!-- 组件的标题 -->
      <div class="title_1">{{title_1}}</div>
      <!-- 组件的副标题，由两部分组成 -->
      <div class="title_2">
        <span class="title_2_1">{{title_2_1}}</span>
        <span class="title_2_2">{{title_2_2}}</span>
      </div>
      <!-- 封面图片 -->
      <img class="cover" :src="cover">
      <!-- 登录按钮，点击时触发组件内 change 方法 -->
      <div>
        <el-button round class="to_login" @click="change" type="success" plain>{{buttonTitle}}</el-button>
      </div>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'Bookmark', // 组件名称
    props: ['title_1', 'title_2', 'title_2_1', 'title_2_2', 'cover', 'buttonTitle'], // 从父组件接收的属性
    data() {
      return {
        // 组件的初始数据
      }
    },
    methods: {
      change() { // 定义 change 方法，当按钮被点击时触发
        this.$emit('change'); // 向父组件触发一个名为 'change' 的事件
      }
    }
  }
</script>

<style scoped>
  .col_box {
    text-align: center;
    padding: 30px 0px;
  }

  .title_1 {
    line-height: 27px;
    color: #efa4cb;
    font-size: 35px;
    letter-spacing: 2px;
    font-family: 'Times New Roman', Times, serif;
  }

 
  .title_2 {
    margin-top: 15px;
    font-size: 20px;
    letter-spacing: 2px;
    font-family: 'Times New Roman', Times, serif;
  }

  .title_2_1 {
    color: #8E9AAF;
  }

  .title_2_2 {
    color: #431d31;
  }

  .cover {
    margin-top: 15px;
    width: 150px;
    height: 150px;
  }

  .to_login {
    margin-top: 15px;
  }
</style>